<template lang="pug">
.list
  div.cont
    div.addBrand
      el-button(size="small" type="primary" @click="addBrand") 添加新品牌
      span(style="margin-left:15px;color:#9C9DA1") 已添加{{ brandNumber }}种品牌
    //- <!--搜索区域-->  
    el-card.search
      header-filter(:filter="filter")
    el-card
      //- <!--表格编辑区域-->
      el-row(style="margin-bottom:15px") 
        el-col(:span="2")
          el-button(size="small" name="primary" @click="delFn") 删除
        //- el-col(:span="2")
        //-   el-button(size="small" name="primary" @click.stop="editBrand") 编辑  
      //- <!--表格区域-->
      el-table(:data="userList" strip @selection-change="handleSelectionChange" :header-cell-style="{ background: '#F3F3F3', fontSize: '14px', color: '#363636' }")
        el-table-column(type="selection" width="55")
        el-table-column(label="商标" prop="logo")
          template(slot-scope="scope")
            img(:src="scope.row.logoUrl" style="width:35px")
        el-table-column(label="品牌名称" prop="name")
        el-table-column(label="进口/国产" prop="isImport")
          template(slot-scope="scope")
            .table-item-status(v-if="scope.row.isImport == '1'") 进口 
            .table-item-status(v-if="scope.row.isImport == '2'") 国产 
        el-table-column(label="证书" prop="certificate")
          template(slot-scope="scope")
            .table-item-perview(@click="perview(scope.row)") 预览
        el-table-column(label="审核状态" prop="reviewStatus")
          template(slot-scope="scope")
            //- .table-item-status(v-if="scope.row.reviewStatus == '0'") 草稿 
            .table-item-status(v-if="scope.row.reviewStatus == '1'") 审核中 
            .table-item-status(v-if="scope.row.reviewStatus == '2'") 审核通过
            .table-item-status(v-if="scope.row.reviewStatus == '3'") 审核失败
        el-table-column(label="操作" prop="isDeleate")
          template(slot-scope="scope")
            .table-item-handles
              .table-item-edit(v-if="scope.row.reviewStatus == 3 " @click="editBrand(scope.row)") 编辑
              .table-item-edit(v-if="scope.row.reviewStatus == 1" @click="editBrand(scope.row)") 编辑
              .table-item-del(v-if="scope.row.reviewStatus != 1" @click="delBrand(scope.row)") 删除
              .table-item-info(v-if="scope.row.reviewStatus == 1") --
        //- 分页
      .index-pagination
        .pagination-total 共 {{total}} 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
            @current-change="handleCurrentChange"
        )
</template>

<script>
import headerFilter from '@/components/headerFilter'
import { loadSupplierBrands, deleteSupplierBrand, loadCertificatePic } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'brandManage',
  components: {
    headerFilter
  },   
  data() {
    return {
      brandNumber:'',
      logoUrl:'',
      certificateUrl:'',
      // imageUrl: '/Material/2021-03-11/9733d07655d9428782dad55201c1a7f2.pdf',
      imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgmall.tg.com.cn%2Fkol%2F2019%2F2%2F27%2F1359%2F90AnAwcvk3SqTINje6B76biimUZQ.jpg%3FimageView2%2F2%2Fw%2F1000&refer=http%3A%2F%2Fimgmall.tg.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635232592&t=119f7b98d8485533b1534d1553bf17c7',
      dialogVisible: false,
      currentPage: 1,
      total:0,
      pageSize:10,
      select:"全部",
      filter: [
        [
          {
          name: '状态：',
          type: 'select',
          key: 'reviewStatus',
          reviewStatus: '',
          handle: '',
          optLabel: 'name',
          optValue: 'value',
          options: [
            { name: '全部' },
            { name: '审核中', value: '1' },
            { name: '审核通过', value: '2' },
            { name: '审核失败', value: '3' }
          ]
        },
        {
            name: '品牌名称：',
            type: 'default',
            key: 'brandName',
            brandName: '',
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ],
      ],
      userList: [],
      displayUserList:[],
      multipleSelection: []
    }
  },
  methods: {
    ...mapActions([
      'changeCarousel'
    ]),
    async getUserList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.page || 1, pageLines: this.pageSize  }
        const { ResultSet } = await this.$axios.post(loadSupplierBrands, { content: { ...query } } )
        this.currentPage = parseInt(this.$route.query.page) || 1
        this.userList = ResultSet.userData.brandList
        this.total=ResultSet.userData.totalSize
        this.brandNumber = this.total
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    perview (row) {
      if (!row.certificateList.length) {
        this.$message.error('该品牌还没有上传证书！')
        return
      }
      this.changeCarousel({ list: row.certificateList, show: true })
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    addBrand () {
      this.$router.push({ name: 'addnewbrand' })
    },
    editBrand (row) {
      // this.$router.push( 'addnewbrand/123' )
      this.$router.push({ name: 'addnewbrand', params: { id: row.supplierBrandId } })       
    },
    //删除单条数据
    delBrand(row){
      // let index = this.multipleSelection[0]
      this.$confirm('删除后会下架该品牌的产品，是否删除？', '提示').then(async () => {
        try {
          await this.$axios.post(deleteSupplierBrand, { content: { supplierBrandIdList: row.supplierBrandId } })
          this.$message.success('删除成功');
          this.getUserList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    //删除多条数据
    delFn(id) {
      if(this.multipleSelection.length === 0){
        this.$message.error('至少选择一个品牌！')
        return
      }
      let row = this.multipleSelection.map(item => { return item.supplierBrandId })
      this.$confirm('删除后会下架该品牌的产品，是否删除？', '提示').then(async () => {
        try {
          await this.$axios.post(deleteSupplierBrand, { content: { supplierBrandIdList: row.join(',') } })
          this.$message.success('删除成功');
          this.getUserList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleCurrentChange(val) {
      this.currentPage= val
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, page: val } })
    }
  },
  beforeRouteEnter (to, from, next) {
    // ...
    next(vm => {
      vm.initFilter()
      vm.getUserList()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getUserList()
    this.initFilter()
  }
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
}
.cont{
  padding:0 32px;
}
.addBrand{
  height:40px;
  line-height:40px;
  margin-bottom:8px;
}
.el-card{
  // line-height:40px;
}
.el-button{
  width:102px;
  height:32px;
  padding:0;
}
.mr16{
  margin-right:16px;
}
.search{
  margin-bottom:15px;
}
.el-row{
  display:flex;
  align-items: center;
}
.select{
  width:160px;
  height:32px;
}
.el-input{
  height:32px!important;
}
.el-table th > .cell{
  text-align:center!important;
}
.pagesize{
  text-align: right;
  margin-top:15px;
}
.el-input .el-input__inner{
  height:32px!important;
  line-height:32px!important;
}
.index-filter {
  margin-top: 24px;
  padding-top: 24px;
  // border-top: 1px solid #CBCBCB;
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
.filter-col {
  min-width: 320px;
  margin-right: 30px;
  display: flex;
  align-items: center;
  .filter-col-label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    color: #363636;
  }
  .filter-col-bd {
    width: 220px;
    .el-select {
      width: 100%;
    }
    .el-input {
      width: 100%;
    }
    &.filter-col-handle {
      text-align: right;
    }
  }
  .el-card .search-form{
    margin-top:16px!important;
  }
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.table-item-handles {
  display: flex;
  align-items: center;
}
.table-item-edit {
  cursor: pointer;
  padding-right: 8px;
  margin-right: 8px;
  border-right:1px solid #CBCBCB;
  color:#FF2E42;
  line-height: 1;
}
.table-item-del {
  cursor: pointer;
  color:#FF2E42;
  line-height: 1;
}
.table-item-perview{
  cursor: pointer;
  color:#FF2E42;
}
</style>
